window.onload=function(){
    searchEffect();
    timeBack();
    bannerEffect();
}
   function searchEffect(){
 // 获取当前banner的高度
    // 获取当前的屏幕滚动式的高度
    var banner=document.querySelector('.jd_banner');
    var search=document.querySelector('.jd_search');
    var bannerHeight=banner.offsetHeight;
    var offetTop=document.body.scrollTop||document.documentElement.scrollTop;
    var opacity=0;
    opacity=offetTop/bannerHeight;
    search.style.backgroundColor='rgba(233,35,34,'+opacity+')';
    window.onscroll=function(){
        var offetTop=document.body.scrollTop||document.documentElement.scrollTop;
        var opacity=0;
        opacity=offetTop/bannerHeight;
        search.style.backgroundColor='rgba(233,35,34,'+opacity+')';
    }
   
   }
   function timeBack(){
    var time = 3700;//秒
    //1小时1分40秒 组成
    // var hour = Math.floor(time / 3600);//1 --> 01
    // var minute = Math.floor(time % 3600 / 60);
    // var second = time % 60;
    // var spans = document.querySelectorAll('.jd_sk_time span');
    // console.log(spans);
    // spans[0].innerText = Math.floor(hour / 10);
    // spans[1].innerText = hour % 10;
    // spans[3].innerText = Math.floor(minute / 10);
    // spans[4].innerText = minute % 10;
    // spans[6].innerText = Math.floor(second / 10);
    // spans[7].innerText = second % 10;
     var tt= setInterval(function(){
        time--;
        if(time < 0){
            //清除定时器 
            clearInterval(tt);
            return;
        }
        var hour = Math.floor(time / 3600);//1 --> 01
        var minute = Math.floor(time % 3600 / 60);
        var second = time % 60;
        var spans = document.querySelectorAll('.jd_sk_time span');
        // console.log(spans);
        spans[0].innerText = Math.floor(hour / 10);
        spans[1].innerText = Math.floor( hour % 10);
        spans[3].innerText = Math.floor(minute / 10);
        spans[4].innerText =Math.floor( minute % 10);
        spans[6].innerText = Math.floor(second / 10);
        spans[7].innerText = Math.floor(second % 10);
    },1000)
}
//轮播图
function bannerEffect(){
    //1设置修改的页面结构
    var banner=document.querySelector('.jd_banner');
    var imgBox=banner.querySelector('ul:first-of-type');
    var first=imgBox.querySelector('li:first-of-type');
    var last=imgBox.querySelector('li:last-of-type');
     imgBox.appendChild(first.cloneNode(true));
     imgBox.insertBefore(last.cloneNode(true), first);

    // 2.1 获取所有的 li 元素 (var lis); 一定要 console.log 测试是不是我们要的东西
    var lis = imgBox.querySelectorAll('li');
    // 2.2 获取 li 元素的数量 var count 一定要 console.log 测试是不是我们要的东西
    var count = lis.length;
    // 2.3 获取 banner 的宽度 var bannerWidth 一定要 console.log 测试是不是我们要的东西
    var bannerWidth = banner.offsetWidth;
    // 2.4 设置图片盒子的总宽度 (imgBox) 审查元素，看是否添加成功
    imgBox.style.width = count * bannerWidth + 'px';
    // 2.5 设置每个 li 元素的宽度为 bannerWidth
    var index = 1;
    for(var i=0;i<lis.length;i++){
        lis[i].style.width = bannerWidth + 'px';
    }
    // 3. 设置默认偏移 ( 负的一个 bannerWidth)
    imgBox.style.left = -bannerWidth+'px';

    // 4. 当屏幕宽度变化的时候，重新计算宽度
    window.onresize = function(){
        // 4.1. 重新获取 banner 的宽度 , 覆盖全局的宽度值
        bannerWidth = banner.offsetWidth;
        // 4.2 重新设置图片盒子的宽度
        imgBox.style.width = count * bannerWidth + 'px';
        // 4.3 重新设置每一个 li( 图片 ) 元素的宽度
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.width = bannerWidth + 'px';
        }
        // 4.4 重新设置定位值
        imgBox.style.left = -index* bannerWidth + 'px';
    }
    //5实现自动轮播

    var timerId = setInterval(function(){
          index++;
          imgBox.style.transition='left 0.5s linear';
          imgBox.style.left=(-index*bannerWidth) +'px';
          setTimeout(function(){
            if(index==count-1){
                index=1;
                //偏移
                imgBox.style.transition='none';
                imgBox.style.left=(-index*bannerWidth) +'px';
            }
          },500)
     },2000);
    //手动轮播图
    var startX,moveX,distanceX;
    imgBox.addEventListener('touchstart',function(e){
        clearInterval(timerId);
       startX=e.targetTouches[0].clientX;
      });
      document.addEventListener('touchmove',function(e){
       moveX=e.targetTouches[0].clientX;
       distanceX=moveX- startX;
       imgBox.style.transition='none';
       imgBox.style.left=-index*bannerWidth + distanceX +'px';  
    })
    imgBox.addEventListener('touchend',function(e){
          //判断距离的绝对值是不是大于100
          if(Math.abs(distanceX) > 100){
              if(distanceX >0){
                  index--;
              }else{
                  index++;
              }
          }
       imgBox.style.transition = 'left 0.5s linear';
       imgBox.style.left = (-index*bannerWidth) +'px';
       setTimeout(function(){
        if(index==count-1){
            index=1;
            //偏移
            imgBox.style.transition='none';
            imgBox.style.left=(-index*bannerWidth) +'px';
        }
        if(index==0){
            index= count-2;
            //偏移
            imgBox.style.transition='none';
            imgBox.style.left=(-index*bannerWidth) +'px';
        }
      },500)
    })
     
}


